<template>
	<div class="px-[35px]">
		<div class="flex items-center my-4 text-sm text-t-1 text-center">
			<div class="flex-auto h-[2px] bg-border-1" />
			<div class="mx-2">{{ $t('login.third') }}</div>
			<div class="flex-auto h-[2px] bg-border-1" />
		</div>
		<div class="flex gap-[18px] justify-center">
			<n-button
				class="w-[156px] rounded-lg bg-bg-3 text-t-1 app-bg-react"
				tertiary
				size="large"
				:loading="loading[Third.google]"
				style="--n-icon-size: 20px; --n-icon-margin: 8px"
				@click="thirdLoginHandle(Third.google)">
				<template #icon>
					<base-image src="account/google.svg" />
				</template>
				{{ $t('login.google') }}
			</n-button>
			<!--			<n-button-->
			<!--				class="flex-1 rounded-lg bg-bg-3 text-t-1 app-bg-react"-->
			<!--				tertiary-->
			<!--				size="large"-->
			<!--				:loading="loading[Third.line]"-->
			<!--				style="&#45;&#45;n-icon-size: 20px; &#45;&#45;n-icon-margin: 8px"-->
			<!--				@click="thirdLoginHandle(Third.line)">-->
			<!--				<template #icon>-->
			<!--					<base-image src="account/line.svg" />-->
			<!--				</template>-->
			<!--				{{ $t('login.line') }}-->
			<!--			</n-button>-->
		</div>
	</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { BaseImage } from '@/components/base'
import { thirdPartyRequest } from '@/api/account'
import { showError, showWarning, t } from '@/utils'
import { NButton } from 'naive-ui'
import { Third } from '@/enums'

const loading = reactive<Record<Third, boolean>>({
	google: false,
	line: false
})

const thirdLoginHandle = async (key: Third) => {
	if (loading[key]) return
	loading[key] = true
	try {
		if (key === Third.line) {
			showWarning(t('app.todo'))
		} else {
			const { data, msg } = await thirdPartyRequest({
				source: key,
				redirectUri: `${location.origin}/social-callback?source=${key}`
			})
			location = data || msg
		}
	} catch (error) {
		showError(error)
	} finally {
		loading[key] = false
	}
}
</script>
